<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        textarea {
            width: 500px;
            height: 300px;
        }

        .discussContent {
            width: 2000px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const discuss = {
        props: ['modelValue'],
        emits: ['update:modelValue', 'getIpt'],
        template: `
        <div>
            <textarea 
                :value="modelValue"
                @input="$emit('update:modelValue',$event.target.value)" 
                @keyup.ctrl.enter="$emit('getIpt')"
            ></textarea>
            <slot name="discussContent"></slot>
        </div>
                `,

    }
    let vm = {
        components: { discuss },
        data () {
            return {
                ipt: "",
                list: [
                    { name: 'GalaxySa', date: '2022-07-06', content: '今晚吃大排档', count: 3 },
                    { name: 'SliverTrain', date: '2022-07-06', content: '今晚吃什么', count: 2 },
                    { name: 'FoggySea', date: '2022-07-06', content: '吃饭不如跳舞', count: 1 }
                ]
            }
        },
        template: `<discuss v-model='ipt' @getIpt="handleIpt">
                            <template #discussContent>
                                <div v-for="(item,index) in list" class="discuss_content">
                                    {{item.name}}
                                    {{item.date}}
                                    {{item.content}}
                                    {{item.count}}
                                    <button @click="thumbsUp(index)">点赞</button>
                                    <button @click="setTop(index)">置顶</button>
                                    <button @click="deleteItem(index)">删除</button>
                                </div>
                            </template>
                    </discuss>`,
        methods: {
            handleIpt () {
                this.list.push({ name: 'GalaxySa', date: '2022-07-06', content: this.ipt, count: 0 })
                this.ipt = ""
            },
            thumbsUp (i) {
                this.list[i].count++
            },
            setTop (i) {
                let temp = this.list.splice(i, 1)
                this.list.unshift(temp[0])
            },
            deleteItem (i) {
                this.list.splice(i, 1)
            }
        },

    }
    Vue.createApp(vm).mount('#app')
</script>

</html>